<template>
  <div>

    <el-row>
      <el-col :span="8">

        <template>
          <template>
            <el-table
              :data="userGroup"
              @row-click="userselect"
              border
              height="750"
              style="width: 100%;">
              <el-table-column
                prop="name"
                label="用户组"
              >
              </el-table-column>


            </el-table>
          </template>

        </template>



      </el-col>
      <el-col :span="8">

        <template>
          <el-table
            :data="pdfrelate"
            border
            height="750"
            style="width: 100%;">
            <el-table-column
              prop="name"
              label="书名"
            >
            </el-table-column>




            <el-table-column
              align="right">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="removeRelate(scope.$index, scope.row)">移除</el-button>
              </template>
            </el-table-column>



          </el-table>

        </template>


      </el-col>



      <el-col :span="8">

        <!-- <el-input
           placeholder="输入关键字进行过滤"
           v-model="filterText">
         </el-input>-->
        <template>
          <!-- <el-tree
             class="filter-tree"
             :data="pdfData"
             show-checkbox
             :filter-node-method="filterNode"
             default-expand-all
             node-key="id"
             ref="tree"
             highlight-current
             :props="defaultProps">
           </el-tree>-->

          <el-table
            :data="pdfData"
            border
            height="750"
            style="width: 100%;">
            <el-table-column
              prop="name"
              label="书名"
            >
            </el-table-column>

            <el-table-column
              align="right">
              <template slot="header" slot-scope="scope">
                <el-input
                  v-model="search"
                  size="mini"
                  placeholder="输入关键字搜索"/>

              </template>
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)">移入</el-button>
              </template>
            </el-table-column>


          </el-table>


        </template>





      </el-col>
    </el-row>







  </div>
</template>

<script>


  import axios from 'axios';


  export default {
    name: 'HelloWorld',
    data() {
      return {
        tableData: [],
        currentPage4:1,
        total:0,
        input:"",
        pageSize:100,
        userGroup:[],
        pdfData:[],
        filterText:"",
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        search:"",
        pdfrelate:[],
        groupId:0,
        bookId: 0,

      }
    },


    methods: {
      getPage(obj, b) {
        /* {
           "currentPageNum": 1,
           "endIndex": 0,
           "pageSize": 100,
           "total": 0 http://localhost:20000/manage/page/group

         }*/
        axios.post(process.env.BASE_API + obj.url, obj.data).then(respone => {
          this.userGroup = respone.data.member;
          this.total = respone.data.total;
        })
          .catch(error => {

          })


      },
      getPagePDF(obj) {
        axios.post(process.env.BASE_API + obj.url, obj.data).then(respone => {
          this.pdfData = respone.data.member;
        })
          .catch(error => {

          });

      },
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },


      userselect(row) {
        this.groupId = row.id;
        console.log(this.groupId);
        axios.get(process.env.BASE_API + "manage/page/getGroupRelate/" + row.id).then(respone => {
          this.pdfrelate = respone.data;
          console.log(this.pdfData);
        })
          .catch(error => {

          });

      },
      handleEdit(date, date1) {
        this.bookId = date1.id;
        axios.post(process.env.BASE_API + "manage/page/insertGroupRelate", {
          "groupId": this.groupId,
          "bookId": this.bookId,
        }).then(respone => {
          this.pdfrelate = respone.data;
          console.log(this.pdfData);
        })
          .catch(error => {

          });


      },

      removeRelate(data1,date2){
        this.bookId = date2.id;
        axios.post(process.env.BASE_API + "/manage/page/deleteRelate", {
          "groupId": this.groupId,
          "bookId": this.bookId,
        }).then(respone => {
          this.pdfrelate = respone.data;
        })
          .catch(error => {

          });



      }


    },


    mounted() {

      //  http://localhost:20000/manage/page/user
      let obj= {data:{
          "currentPageNum": 1,
          "endIndex": 0,
          "pageSize": parseInt(this.pageSize),
          "total": 0
        },
        url:"manage/page/group",
      };
      //  http://localhost:20000/manage/page/user
      let obj2= {data:{
          "currentPageNum": 1,
          "endIndex": 0,
          "pageSize": parseInt(this.pageSize),
          "total": 0
        },
        url:"manage/page/magezines",
      };


      this.getPage(obj,this);

      this.getPagePDF(obj2,this);



    },

    watch: {
      filterText(val) {
        this.$refs.tree2.filter(val);
      }
    },




  }
</script>

<style scoped>



</style>
